<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        text-align: center;
      }
      .con {
        margin: 100px auto;
        width: 1500px;
        height: 500px;
        color: black;
        font-weight: 500;
      }
      .top {
        /* width: 100%; */
        padding: 50px;
        height: 150px;
        text-align: center;
        color: black;
      }
      input {
        height: 20px;
        margin: 10px 10px;
        width: 300px;
        color: black;
      }
      table {
        border-collapse: collapse;
        font-size: 20px;
      }
      th {
        width: 300px;
      }
      tr {
        width: 300px;
        line-height: 30px;
      }
      td {
        font-size: 15px;
        text-align: center;
      }
      a {
        text-decoration: none;
      }
      .add {
        width: 50px;
        height: 25px;
        margin-left: 5px;
        color: white;
        background-color: pink;
        background-size: 400%;
        text-align: center;
        border: none;
        border-radius: 5px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="con">
      <div class="top">
        <div>
          用户名：<input
            class="uname"
            type="text"
            value=""
            placeholder="请输入用户名（只能以字母开头，由数字字母组成）"
          />

          密码:
          <input
            class="password"
            type="password"
            value=""
            placeholder="请输入密码(不低于6位，必须包含大小写)"
          />
          确认密码:
          <input
            class="passwords"
            type="password"
            value=""
            placeholder="请再次输入密码(不低于6位，必须包含大小写)"
          />
        </div>
        <div>
          手机号:
          <input
            class="phone"
            type="text"
            value=""
            placeholder="请输入手机号"
          />
          姓名:
          <input
            class="names"
            type="text"
            value=""
            placeholder="请输入姓名(2-4个文字)"
          />
          身份证号:
          <input class="idd" type="text" value="" placeholder="请输入身份证" />
        </div>
        <br />
        <button class="add" value="添加">添加</button>
      </div>
      <div class="btm">
        <table border="1">
          <thead>
            <tr>
              <th>用户名</th>
              <th>密码</th>
              <th>确认密码</th>
              <th>手机号</th>
              <th>姓名</th>
              <th>身份证号</th>
              <th>操作</th>
              <th>查看信息</th>
            </tr>
          </thead>
          <tbody>
            <tr></tr>
          </tbody>
        </table>
      </div>
    </div>
    <script>
      // 第一步 准备好数据
      let arr = [];
      // 获取父元素
      let tbody = document.querySelector("tbody");
      //添加数据
      //获取按钮
      let btn = document.querySelector(".add");
      // 获取表单元素
      let uname = document.querySelector(".uname");
      let password = document.querySelector(".password");
      let passwords = document.querySelector(".passwords");
      let phone = document.querySelector(".phone");
      let names = document.querySelector(".names");
      let idd = document.querySelector(".idd");
      // 渲染函数
      function fun() {
        // 先清除以前的数据
        tbody.innerHTML = "";
        // 根据数据的条数来渲染增加  tr
        for (let i = 0; i < arr.length; i++) {
          // 创建tr
          let tr = document.createElement("tr");
          tr.innerHTML = `
              <td>${arr[i].uname}</td>
               <td>${arr[i].password}</td>
               <td>${arr[i].passwords}</td>
               <td>${arr[i].phone}</td>
               <td>${arr[i].names}</td>
               <td>${arr[i].idd}</td>
               <td>
                 <a href="javascript:" id='${i}'>删除</a>
               </td>
               <td>
                <button id='${i}'>查看</button>
               </td>
               `;
          // 把tr追加给 tbody
          tbody.appendChild(tr);
          // 复原表单
          uname.value =
            password.value =
            passwords.value =
            phone.value =
            names.value =
            idd.value =
              "";
        }
      }
      fun();
      // 用户名正则
      uname.addEventListener("chenge", unn);
      var unameG = /^[A-z][\w]/g;
      function unn() {
        if (!unameG.test(uname.value)) {
          return (uname.value = "不规范");
        } else {
          return uname.value;
        }
      }
      // 密码正则
      password.addEventListener("chenge", passwordfun);
      var passwordreg = /^[a-zA-Z]\w{5,17}$/;
      function passwordfun() {
        if (!passwordreg.test(password.value)) {
          return (password.value = "不规范");
        } else {
          return password.value;
        }
      }
      // 确认密码
      passwords.addEventListener("chenge", passwordsfun);
      function passwordsfun() {
        if (passwords.value !== password.value) {
          return (passwords.value = "两次密码不一样");
        } else {
          return passwords.value;
        }
      }

      //手机号正则
      phone.addEventListener("chenge", phfun);
      var phonereg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      function phfun() {
        if (!phonereg.test(phone.value)) {
          return (phone.value = "手机号不规范");
        } else {
          return phone.value;
        }
      }
      // 姓名正则
      names.addEventListener("chenge", namesfun);
      var namesreg = /^[\u4e00-\u9fa5]{2,4}$/;
      function namesfun() {
        if (!namesreg.test(names.value)) {
          return (names.value = "姓名不规范");
        } else {
          return names.value;
        }
      }
      // 身份证正则
      idd.addEventListener("chenge", iddfun);
      var iddreg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      function iddfun() {
        if (!iddreg.test(idd.value)) {
          return (idd.value = "身份证号不规范");
        } else {
          return idd.value;
        }
      }
      btn.addEventListener("click", function () {
        //获得表单里面的值  之后追加给  数组
        // function funt() {
        //   if (!reg.test(uname.value)) {
        //     alert("11");
        //     return (uname.value = "用户名错误");
        //   } else {
        //     return uname.value;
        //   }
        // }
        arr.push({
          uname: unn(),
          password: passwordfun(),
          passwords: passwordsfun(),
          phone: phfun(),
          names: namesfun(),
          idd: iddfun(),
        });
        console.log(arr);
        // 重新渲染函数
        fun();
      });

      // 删除操作
      tbody.addEventListener("click", function (e) {
        if (e.target.tagName == "A") {
          //   alert(11);
          console.log(e.target.id);
          arr.splice(e.target.id, 1);
          fun();
        }
        if (e.target.tagName == "BUTTON") {
          alert(
            `用户名:${arr[e.target.id].uname}\n密码:${
              arr[e.target.id].password
            }\n确认密码:${arr[e.target.id].passwords}
             \n手机号:${arr[e.target.id].phone}
             \n姓名:${arr[e.target.id].names}
             \n身份证:${arr[e.target.id].idd}
             `
          );
        }
      });
    </script>
  </body>
</html>
